<template>
	<view class="content">
		<view class="chang-time">
			<view class="c-t-o" v-if="xuanze != 1" @click="chang_dang(1)">
				周期内总业绩排名
			</view>
			<view class="c-t-o c-t-oo" v-if="xuanze == 1" >
				周期内总业绩排名
			</view>
			<view class="c-t-o" v-if="xuanze != 2" @click="chang_dang(2)">
				周期内总加钟金额排名
			</view>
			<view class="c-t-o c-t-oo" v-if="xuanze == 2" >
				周期内总加钟金额排名
			</view>
		
			
		</view>
		<view class="rech-hd" v-if="xuanze == 1">
			<view class="qiansan er">
				<image class="touxiang" :src="er.work_img_img" mode=""></image>
				<image class="tubiao"  src="http://h5.hexukeji.com/techn_img/diere.png" mode=""></image>
				<text class="mingzi">{{er.nickname}}</text>
				<text class="miaoshu">{{wenzi}}</text>
				<text class="jiage">¥{{er.yeji}}</text>
			</view>
			<view class="qiansan yi">
				<image class="touxiang" :src="yi.work_img_img" mode=""></image>
				<image class="tubiao" src="http://h5.hexukeji.com/techn_img/diyiy.png" mode=""></image>
				<text class="mingzi jiagee">{{yi.nickname}}</text>
				<text class="miaoshu">{{wenzi}}</text>
				<text class="jiage jiagee">¥{{yi.yeji}}</text>
			</view>
			<view class="qiansan san">
				<image class="touxiang"  :src="san.work_img_img" mode=""></image>
				<image class="tubiao"  src="http://h5.hexukeji.com/techn_img/disans.png" mode=""></image>
				<text class="mingzi jiages">{{san.nickname}}</text>
				<text class="miaoshu">{{wenzi}}</text>
				<text class="jiage jiages">¥{{san.yeji}}</text>
			</view>
			
		</view>
		
		<view class="rech-hd" v-if="xuanze == 2">
			<view class="qiansan er">
				<image class="touxiang" :src="er.work_img_img" mode=""></image>
				<image class="tubiao"  src="http://h5.hexukeji.com/techn_img/diere.png" mode=""></image>
				<text class="mingzi">{{er.nickname}}</text>
				<text class="miaoshu">{{wenzi}}</text>
				<text class="jiage">¥{{er.jiazhong}}</text>
			</view>
			<view class="qiansan yi">
				<image class="touxiang" :src="yi.work_img_img" mode=""></image>
				<image class="tubiao" src="http://h5.hexukeji.com/techn_img/diyiy.png" mode=""></image>
				<text class="mingzi jiagee">{{yi.nickname}}</text>
				<text class="miaoshu">{{wenzi}}</text>
				<text class="jiage jiagee">¥{{yi.jiazhong}}</text>
			</view>
			<view class="qiansan san">
				<image class="touxiang"  :src="san.work_img_img" mode=""></image>
				<image class="tubiao"  src="http://h5.hexukeji.com/techn_img/disans.png" mode=""></image>
				<text class="mingzi jiages">{{san.nickname}}</text>
				<text class="miaoshu">{{wenzi}}</text>
				<text class="jiage jiages">¥{{san.jiazhong}}</text>
			</view>
			
		</view>
		
		
		<view class="tech-eva-con" v-if="xuanze == 1">
			<view class="yitiao" v-for="(item,index) in show" v-if="index > 2 ">
				<view class="left">
					<image :src="item.work_img_img" mode=""></image>
				</view>
				<view class="center">
					<view class='mingzi'>{{item.nickname}}</view>
					<view class='yeji'>{{wenzi}}:<text>¥{{item.yeji}}</text></view>
					
				</view>
				<view class="right">
					<view class="no">{{item.yeji_no}}</view>
					<view class="paiming">排名</view>
				</view>
			</view>
			
		
		</view>
		
		<view class="tech-eva-con" v-if="xuanze == 2">
			<view class="yitiao" v-for="(item,index) in show" v-if="index > 2 ">
				<view class="left">
					<image :src="item.work_img_img" mode=""></image>
				</view>
				<view class="center">
					<view class='mingzi'>{{item.nickname}}</view>
					<view class='yeji'>{{wenzi}}:<text>¥{{item.jiazhong}}</text></view>
					
				</view>
				<view class="right">
					<view class="no">{{item.jiazhong_no}}</view>
					<view class="paiming">排名</view>
				</view>
			</view>
			
		
		</view>
		
		<view class="tech-eva-con dibu" v-if="xuanze == 1">
			<view class="yitiao">
				<view class="left">
					<image :src="my.work_img_img" mode=""></image>
				</view>
				<view class="center">
					<view class='mingzi'>{{my.nickname}}</view>
					<view class='yeji'>{{wenzi}}:<text>¥{{my.yeji}}</text></view>
					
				</view>
				<view class="right">
					<view class="no">{{my.yeji_no}}</view>
					<view class="paiming">我的排名</view>
				</view>
			</view>
		</view>
		
		<view class="tech-eva-con dibu" v-if="xuanze == 2">
			<view class="yitiao">
				<view class="left">
					<image :src="my.work_img_img" mode=""></image>
				</view>
				<view class="center">
					<view class='mingzi'>{{my.nickname}}</view>
					<view class='yeji'>{{wenzi}}:<text>¥{{my.jiazhong}}</text></view>
					
				</view>
				<view class="right">
					<view class="no">{{my.jiazhong_no}}</view>
					<view class="paiming">我的排名</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	const app = getApp();
	const request = require('../../utils/request');
	export default {
		data() {
			return {
				my:{},
				yeji:{},
				jiazhong:{},
				show:{},
				xuanze:1,
				wenzi:'总业绩',
				yi:{},
				er:{},
				san:{},
			}
		},
		onLoad()
		{
			
		},
		onShow()
		{
			this.load_money_info();
		},
		onPullDownRefresh()
		{
			//console.log('下拉');
			// var that = this;
			// that.load_money_info(); //获取技师余额日志列表
		},
		onReachBottom()
		{
			//console.log('上拉');
			// var that = this;
			// that.load_money_info(true); //获取技师余额日志列表
		},
		methods: {
			chang_dang(type){
				this.xuanze = type;
				this.load_money_info();
			},
			/**
			 * 获取技师账户信息
			 */
			load_money_info:function()
			{
				var that = this;
				//网络请求
				request(app.globalData.n_url+'/v1/Tuisong/paihang', 'POST', {}).then((res) => {
					if(res.data.code == 0)
					{
						console.log(res);
						that.my = res.data.data.my;
						that.yeji = res.data.data.yeji;
						that.jiazhong = res.data.data.jiazhong;
						if(that.xuanze == 1){
							that.show = that.yeji;
							that.wenzi = '总业绩';
						}else{
							that.show = that.jiazhong;
							that.wenzi = '加钟业绩';
						}
						that.yi = that.show[0];
						that.er = that.show[1];
						that.san = that.show[2];
					
					}else
					{
						uni.showToast({
							title:res.data.msg,
							icon:'none'
						});
						app.is_login_check(res.data);
						app.is_techn_check(res.data);
					}
				});
			},
			
		}
	}
</script>

<style lang="scss">
page{
	background-color: $uni-bg-color-grey;
}
.content{
	.chang-time{
		width: 100%;
		height: 60rpx;
		display:flex;
		.c-t-o{
			text-align: center;
			width: 50%;
		}
		.c-t-oo{
			font-size: 36rpx;
			border-top: 8rpx solid $uni-text-color-active;
		}
		
	}
	.acc-pri{
		display: flex;
		background-color: #fff;
		padding:30rpx 0;
		.acc-pri-con{
			flex: 1;
			text-align: center;
			&:first-child{
				border-right: 2rpx solid  $uni-bg-color-grey;
			}
			.acc-pri-num{
				text{
					position: relative;
					font-size: 40rpx;
					&::before{
						position: absolute;
						left:-25rpx;
						bottom:5rpx;
						content: "￥";
						font-size: 24rpx;
					}
				}
			}
			.acc-pri-tit{
				margin-top:10rpx;
				font-size: 28rpx;
				color: $uni-text-color-grey;
			}
		}
	}
	.rech-hd{
		padding: 0 0 10rpx;
		color: #fff;
		text-align: center;
		// background-color:$uni-text-color-active;
		// background:url('https://h5.hexukeji.com/techn_img/tj_bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		display: flex;
		border-radius: 30rpx;
		width: 96%;
		margin: 0 auto;
		color:black;
		.qiansan{
			width:32%;
			
		}
		
		.er{
			background:url('https://h5.hexukeji.com/techn_img/disan.png');
			background-size: 100% 100%;
			.touxiang{
				top:102rpx;
				border: 4rpx solid #92A2B9;
			}
			.tubiao{
				top:140rpx;
			}
			.mingzi{
				margin-top: 120rpx;
			}
		}
		.yi{
			background:url('https://h5.hexukeji.com/techn_img/diyi.png');
			background-size: 100% 100%;
		}
		.san{
			background:url('https://h5.hexukeji.com/techn_img/dier.png');
			background-size: 100% 100%;
			.touxiang{
				top:102rpx;
				border: 4rpx solid #BA8258;
			}
			.tubiao{
				top:140rpx;
			}
			.mingzi{
				margin-top: 120rpx;
			}
		}
		.tubiao{
			width: 60rpx;
			height: 60rpx;
			position: relative;
			top: 114rpx;
			left: -50rpx;
		}
		.touxiang{
			width: 100rpx;
			height: 100rpx;
			position: relative;
			top: 70rpx;
			left: 35rpx;
			border-radius: 50%;
			border: 4rpx solid #FFD16F;
		}
		text{
			display: block;
		}
		.mingzi{
			margin-top: 100rpx;
			font-size: 34rpx;
			color:#92A2B9;
		}
		.jiagee{
			font-size: 36rpx;
			color:#FFD16F;
		}
		.jiages{
			font-size: 36rpx;
			color:#BA8258;
		}
		.miaoshu{
			font-size: 26rpx;
			color: #777;
		}
		.jiage{
			font-weight: bold;
			font-size: 36rpx;
			color:#92A2B9;
		}
		.jiagee{
			font-size: 36rpx;
			color:#FFD16F;
		}
		.jiages{
			font-size: 36rpx;
			color:#BA8258;
		}
		
		
	}
	.none{
		display: none;
	}
	.tech-eva-con{
		margin:0 20rpx;
		border-radius:20rpx;
		padding:20rpx 30rpx;
		background-color: #fff;
		.yitiao{
			display: flex;
			margin: 10rpx 0;
			.left{
				image{
					    width: 100rpx;
					    height: 100rpx;
					    border-radius: 50%;
				}
			}
			.center{
				width: 60%;
				margin-left: 20rpx;
				border-bottom: 2rpx solid #777;
				.mingzi{
					font-size: 36rpx;
					font-weight: bold;
					
				}
				.yeji{
					color:#777;
					text{
						color:#10A793;
						font-weight: bold;
					}
				}
			}
			.right{
				width: 25%;
				text-align: right;
				border-bottom: 2rpx solid #777;
				.no{
					font-size: 36rpx;
					color:#10A793;
					font-weight: bold;
				}
				.paiming{
					color:#777;
				}
			}
		}
		
		
	}
	.dibu{
		// position: absolute;
		// bottom: 0;
		margin-bottom: 10rpx;
		width: 87%;
	}
}
</style>